<template>
  <section style="min-width:1300px">

    <enHeader :bannerShow="0"></enHeader>
    <div class="mycontainer">
      <enBread></enBread>
      <div class="mycon">
        <dl v-for="(group,index) in menulist"
            :key="index">
          <dt v-if="group.children&& group.children.length>0">{{group.menuName}}</dt>
          <dt v-else
              style="color: #850c0c;cursor:pointer"
              @click="noChildren(group)">{{group.menuName}}</dt>
          <div v-if="group.children&& group.children.length>0">
            <dd v-for="(item,ind) in group.children"
                :key="ind"
                @click="to(item,group.menuName,'',group.id)"><span>{{item.menuName}}</span></dd>
          </div>
        </dl>
      </div>
    </div>
    <enFooter></enFooter>
  </section>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "sitemap",
  data () {
    return {
      books2: 'Website map',
      menulist: []
    };
  },

  created () {
    this.getMenuList()
  },
  methods: {
    noChildren (v) {
      let obj = {
        myvuex: {
          books: v.menuName,
          menuid: v.id
        },
      };
      sessionStorage.setItem("books", obj.myvuex.books)
      this.$store.commit('stateFn', obj);
      let param = {
        query: {
          "ids": v.id,
          "templateId": v.templateId,
          "entityId": v.entityId,
          "time": new Date().getTime()
        }
      }
      this.$router.push({ path: '/front/commons', ...param })
    },
    to (item, sectit = '', firtit = '', pid = "") {
      let firtab = firtit != '' ? (firtit + ',') : '';
      let sectab = sectit != '' ? (sectit + ',') : '';
      let obj = {
        myvuex: {
          books: firtab + sectab + item.menuName,
          menuid: item.id
        },
      };
      if (item.menuName == "RLB Exchange Rates") {
        this.tourl("/front/article?articleId=10000");
        return;
      }
      if (item.children) {
        let info = item.children[0];
        let str = sectit + "," + item.menuName + "," + info.menuName;
        obj.myvuex.books = str
        obj.myvuex.menuid = info.id;
        let param = {
          query: {
            "pid": pid,
            "templateId": info.templateId,
            "entityId": info.entityId,
            "time": new Date().getTime()
          }
        }
        this.$router.push({ path: '/front/commons', ...param })
      } else {
        let query = { "templateId": item.templateId, "entityId": item.entityId, "time": new Date().getTime() };
        this.$router.push({ path: '/front/commons', query: { "pid": pid, "templateId": item.templateId, "entityId": item.entityId, "time": new Date().getTime() } });
      }
      sessionStorage.setItem("books", obj.myvuex.books)
      this.$store.commit('stateFn', obj);
    },
    getMenuList () {
      let self = this
      Driver.proxy(
        "api",
        {
          apiPath: apiConfig.member.getMenuTree,
          mode: "post",
          data: {
            pid: 0
          }
        },
        function (suc) {
          if (suc.data) {
            self.menulist = suc.data || []
          }
        },
        function (err) {

        }
      );
    },

  }
};
</script>


<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}
.mycontainer {
  width: 1300px;
  margin: 0 auto;
  padding: 0 5%;
  box-sizing: border-box;
  overflow-x: hidden;
  margin-top: 20px;
  min-height: 600px;
  .mycon {
    width: 100%;
    padding: 30px 0 20px;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 18px;
    dl {
      width: 30%;
      margin-bottom: 30px;
      font-size: 14px;
      line-height: 24px;
      dt {
        color: #000;
        margin-bottom: 15px;
        font-weight: bold;
        font-size: 18px;
      }
      dd {
        color: #850c0c;
        font-size: 18px;
        margin-top: 10px;

        span {
          cursor: pointer;
          font-size: 18px;
          padding-left: 50px;
        }
      }
    }
  }
}
</style>
